<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试页</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.js"></script>
	<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
	
	<script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
	<link href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css" rel="stylesheet">
	<style type="text/css">
		.all,.main_div{
			padding: 1px 10px 1px 10px;
		}
		.div_header{
			text-align: center;
			font-weight: bold;
			font-size: 16px;
			border-bottom: 1px solid;
			padding-bottom: 10px;
			padding-top: 10px;
		}
		a {
    		color: blue;
    		text-decoration: underline;
    		cursor: pointer;
		}
		
	</style>
</head>
<body>
	<div id="el" class="all">
		<div class="div_header">
		</div>
		<div class="div_main">
			<div id="div_content" class="main_div">
<div class="row">
小区名称：<input type="text" value="" v-model="param.xqmc">
</div>
<div class="row">
申报单位：<input type="text" value="" v-model="param.sbdw">
</div>
<div class="row">
维修项目：<input type="text" value="" v-model="param.wxxm">
</div>
<div class="row">
特殊维修项目（List）：<input type="text" value="" v-model="param.tswxxm_">
</div>
<div class="row">
工程预算金额（元）：<input type="text" value="" v-model="param.budget_money">
</div>
<div class="row">
资金缺口（元）：<input type="text" value="" v-model="param.gap_money">
</div>
<div class="row">
申报人姓名：<input type="text" value="" v-model="param.sbr_name">
</div>
<div class="row">
身份证号：<input type="text" value="" v-model="param.id_card">
</div>
<div class="row">
申报人联系电话：<input type="text" value="" v-model="param.sbr_phone">
</div>
<div>
<button type="button" class="btn btn-primary " @click="saveSb();">保存</button>
</div>
<div id="showDesc">{{showDesc}}</div>
			</div>
			<br /><br /><br /><br /><hr>
			<div id="div_content" class="main_div">
			要件参数：<input type="text" value="" v-model="queryParam._query_type">
			<button type="button" class="btn btn-primary " @click="queryList();">查询</button>
				<div id="mainList" style="width: 100%;">
					
				</div>
			</div>
		</div>
		
	</div>
	
</body>
<script type="text/javascript">

	Vue.prototype._resetQueryParam = function(){
		//console.log(this.queryParam);
		//递归--待写
		this.queryParam
		for(let i in this.queryParam){
			this.queryParam[i] = null;
		}
	};

	var app = new Vue({
	  	el: '#el',
	  	data: {
	  		param: {},
	  		queryParam: {},
	  		showDesc: ''
	  	},
	  	methods: {
	  		closeLayer: function(){
	  			layui.use('layer', function(){
					var layer = layui.layer;
					layer.closeAll();
				});
	  		},
	  		saveSb: function(){
	  			var self = this;
	  			
	  			var tswxxm_ = self.param.tswxxm_;
	  			if(tswxxm_ && tswxxm_.length > 0){
	  				self.param.tswxxm = tswxxm_.split(";");
	  			}
	  			
				jQuery.ajax({
					url: '[[@{/}]]rest/mat/client/saveSb',
					async: true,
					//dataType: 'json',
					contentType: "application/json",
					type: 'post',
					data: JSON.stringify(jQuery.extend({}, self.param)),
					success: function(res){
						if(res.code == 0){
							var ss = "恭喜您！已完成维修资金使用申请，业务编号 "+res.data+"，请牢记业务编号，您可通过业务编号查询申请进度 。";
							self.showDesc = ss;
						}else {
							alert(res.data);
						}
						
					}
				});
	  		}
	  		,queryList: function(){
				var self = this;
				
				self.queryParam.query_type = self.queryParam._query_type.split(";");
				
				layui.use('table', function(){
				  var table = layui.table;
				  window.myTable = table;
				  //var xh= $(window).height() -($("#projectList").height()+$("#mainList").offset().top-$(document).scrollTop());
				  table.render({
				    elem: '#mainList'
				    ,method: "post"
				    ,where: self.queryParam
				    ,url: '[[@{/}]]rest/mat/client/queryItemList_client'
				    ,cols: [ [

  {field:'id', width:200, title: 'id'}
  ,{field:'item_name', width:166, title: '类型1',templet: function(row){
	  if(row.flag_desc)
	  	return row.item_name + "（" + row.flag_desc + "）";
	  else
		return row.item_name;
	  }}
  ,{field:'item_type_desc', width:200, title: '类型2'}
				    ] ]
				  ,done: function(res){
					  self.queryListDate = res.data;
				  }
				  });
			      
				});
				
			}
			
	  	},
	  	mounted: function(){
		  	//this.queryList();
	  	}
	})
</script>
</html>